<template>
	<view class="smain">
		<!-- 单料评吸 -->
		<view class="table">
			<view class="" style="overflow: auto;">


				<table emptyText="暂无更多数据" class="tableData noT">
					<!-- 表头行 -->
					<tr class="table-header">
						<th align="center" rowspan="2" class="bh">编号</th>
						<th align="center" rowspan="2" class="nf">年份、产地、等级</th>
						<th align="center" colspan="3" class="xq">香气指标</th>
						<th align="center" colspan="3" class="yq">烟气指标</th>
						<th align="center" colspan="3" class="kz">控制指标</th>
						<th align="center" rowspan="2" class="rs">燃烧性</th>
						<th align="center" rowspan="2" class="hs">灰色</th>
						<th align="center" rowspan="2" class="tc">突出特点</th>
						<th align="center" rowspan="2" class="yt">用途</th>
						<th align="center" rowspan="2" class="bz">备注</th>
					</tr>
					<tr class="table-header">
						<th align="center">香型</th>
						<th align="center">香气值</th>
						<th align="center">香气量</th>
						<th align="center">浓度</th>
						<th align="center">柔细度</th>
						<th align="center">余味</th>
						<th align="center">杂气</th>
						<th align="center">刺激性</th>
						<th align="center">劲头</th>
					</tr>
					<!-- 表格数据行 -->
					<tr v-for="(item,index) in tableData " :key="index">
						<td>
							<view class="td">
								{{item.number}}
							</view>
						</td>
						<td>
							<view class="td">
								{{item.smokeName}}
							</view>
						</td>
						<td>
							<view class="td">
								<!-- <input class="transparent-input" @input="change" :data-index="index" :disabled="already"
									v-model="item.meetingUnblendedCorrelationRep.aromaFlavor"></input> -->
									<!-- -->
									<u-input border="surround" inputAlign="center" fontSize="16px" :disabled="already"
									  @blur="inputBlur(item.meetingUnblendedCorrelationRep, 'aromaFlavor')" 
									    v-model="item.meetingUnblendedCorrelationRep.aromaFlavor" ></u-input>
							</view>
						</td>
						<td>
							<view class="td">
								<!-- <input class="transparent-input" @input="change" :data-index="index" :disabled="already"
									v-model="item.meetingUnblendedCorrelationRep.aromaQuality"></input> -->
									<u-input border="surround" inputAlign="center" fontSize="16px" :disabled="already"
									  @blur="inputBlur(item.meetingUnblendedCorrelationRep, 'aromaQuality')" 
									    v-model="item.meetingUnblendedCorrelationRep.aromaQuality" ></u-input>
							</view>
						</td>
						<td>
							<view class="td">
								<!-- <input class="transparent-input" @input="change" :data-index="index" :disabled="already"
									v-model="item.meetingUnblendedCorrelationRep.aromaVolume"></input> -->
									<u-input border="surround" inputAlign="center" fontSize="16px" :disabled="already"
									  @blur="inputBlur(item.meetingUnblendedCorrelationRep, 'aromaVolume')" 
									    v-model="item.meetingUnblendedCorrelationRep.aromaVolume" ></u-input>
							</view>
						</td>
						<td>
							<view class="td">
								<!-- <input class="transparent-input" @input="change" :data-index="index" :disabled="already"
									v-model="item.meetingUnblendedCorrelationRep.density"></input> -->
									<u-input border="surround" inputAlign="center" fontSize="16px" :disabled="already"
									  @blur="inputBlur(item.meetingUnblendedCorrelationRep, 'density')" 
									    v-model="item.meetingUnblendedCorrelationRep.density" ></u-input>
							</view>
						</td>
						<td>
							<view class="td">
								<!-- <input class="transparent-input" @input="change" :data-index="index" :disabled="already"
									v-model="item.meetingUnblendedCorrelationRep.fineness"></input> -->
									<u-input border="surround" inputAlign="center" fontSize="16px" :disabled="already"
									  @blur="inputBlur(item.meetingUnblendedCorrelationRep, 'fineness')" 
									    v-model="item.meetingUnblendedCorrelationRep.fineness" ></u-input>
							</view>
						</td>
						<td>
							<view class="td">
								<!-- <input class="transparent-input" @input="change" :data-index="index" :disabled="already"
									v-model="item.meetingUnblendedCorrelationRep.aftertaste"></input> -->
									<u-input border="surround" inputAlign="center" fontSize="16px" :disabled="already"
									  @blur="inputBlur(item.meetingUnblendedCorrelationRep, 'aftertaste')" 
									    v-model="item.meetingUnblendedCorrelationRep.aftertaste" ></u-input>
							</view>
						</td>
						<td>
							<!-- 杂气 -->
							<view class="td">
								<!-- <input class="transparent-input" v-model="item.meetingUnblendedCorrelationRep.impure" :disabled="already"
									@input="change" :data-index="index"></input> -->
									<u-input border="surround" inputAlign="center" fontSize="16px" :disabled="already"
									  @blur="inputBlur(item.meetingUnblendedCorrelationRep, 'impure')" 
									    v-model="item.meetingUnblendedCorrelationRep.impure" ></u-input>
							</view>
						</td>
						<td>
							<view class="td">
								<!-- <input class="transparent-input" v-model="item.meetingUnblendedCorrelationRep.thrill"
									@input="change" :data-index="index"></input> -->
									<u-input border="surround" inputAlign="center" fontSize="16px" :disabled="already"
									 @blur="inputBlur(item.meetingUnblendedCorrelationRep, 'thrill')" 
									    v-model="item.meetingUnblendedCorrelationRep.thrill" ></u-input>
							</view>
						</td>
						<td>
							<view class="td">
								<!-- <input class="transparent-input" v-model="item.meetingUnblendedCorrelationRep.energy" :disabled="already"
									@input="change" :data-index="index"></input> -->
									<u-input border="surround" inputAlign="center" fontSize="16px" :disabled="already"
									  @blur="inputBlur(item.meetingUnblendedCorrelationRep, 'energy')" 
									    v-model="item.meetingUnblendedCorrelationRep.energy" ></u-input>
							</view>
						</td>
						<td>
							<view class="td">
								<!-- <input class="transparent-input"
									v-model="item.meetingUnblendedCorrelationRep.combustibility" @input="change" :disabled="already"
									:data-index="index"></input> -->
								<u-input border="surround" inputAlign="center" fontSize="16px" :disabled="already"
									  @blur="inputBlur(item.meetingUnblendedCorrelationRep, 'combustibility')" 
									    v-model="item.meetingUnblendedCorrelationRep.combustibility" ></u-input>
							</view>
						</td>
						<td>
							<view class="td">
								<!-- <input class="transparent-input" v-model="item.meetingUnblendedCorrelationRep.soot" :disabled="already"
									@input="change" :data-index="index"></input> -->
									<u-input border="surround" inputAlign="center" fontSize="16px" :disabled="already"
									  @blur="inputBlur(item.meetingUnblendedCorrelationRep, 'soot')" 
									    v-model="item.meetingUnblendedCorrelationRep.soot" ></u-input>
							</view>
						</td>
						<td>
							<view class="td">
								<!-- <input class="transparent-input"
									v-model="item.meetingUnblendedCorrelationRep.characteristic" @input="change" :disabled="already"
									:data-index="index"></input> -->
								<u-input border="surround" inputAlign="center" fontSize="16px" :disabled="already"
									 @blur="inputBlur(item.meetingUnblendedCorrelationRep, 'characteristic')" 
									    v-model="item.meetingUnblendedCorrelationRep.characteristic" ></u-input>
							</view>
						</td>
						<td>
							<view class="td">
								<!-- <input class="transparent-input" v-model="item.meetingUnblendedCorrelationRep.purpose" :disabled="already"
									@input="change" :data-index="index"></input> -->
								<u-input border="surround" inputAlign="center" fontSize="16px" :disabled="already"
								  @blur="inputBlur(item.meetingUnblendedCorrelationRep, 'purpose')" 
								    v-model="item.meetingUnblendedCorrelationRep.purpose" ></u-input>
							</view>
						</td>
						<td>
							<view class="td">
								<!-- <input class="transparent-input" v-model="item.meetingUnblendedCorrelationRep.remarks" :disabled="already"
									@input="change" :data-index="index"></input> -->
								<u-input border="surround" inputAlign="center" fontSize="16px" :disabled="already"
								  @blur="inputBlur(item.meetingUnblendedCorrelationRep, 'remarks')" 
								    v-model="item.meetingUnblendedCorrelationRep.remarks" ></u-input>
							</view>
						</td>
					</tr>


				</table>



			</view>


		</view>


		<!-- <view class="btns">
			<view class="btn" @click="submit">{{ already? '已提交':'提交'}}</view>
		</view> -->
		<view class="submit-line">
			<u-button :text="already? '已提交':'提交'" type="success" class="btn" @click="submit" :disabled="already"></u-button>
		</view>
		
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import ryfStep from "@/components/ryf-step/step.vue"
	import {
		getMMC
	} from "@/api/correlation.js"
	import {
		getMeetingUnblended,
		meetingUnblendedCorrelation
	} from "@/api/tPoint.js"
	import request from '@/utils/request.js'
	export default {
		components: {
			ryfStep
		},
		props: {
			id: {
				type: [Number, String],
				default: 0
			},
			already: { //是否已经提交过了
				type: Boolean,
				default: false,
			}
		},
		data() {
			return {
				tabHead: [
					'光泽 5', '香气 32', '谐调 6', '杂气 12', '刺激性 20', '余味 25',
				],
				tableData: [],
				tableHeadData: []

			}
		},
		methods: {
			getData() {
				this.tableData = [];
				this.tableHeadData = [];
				getMeetingUnblended({
					allId: this.id
				}).then(res => {
					console.log(res);
					this.tableData = res.data
					// if (res.code == 200) {
					// 	const data = res.data || [];
					// 	data.forEach(item => {
					// 		if (item.status == '0') {
					// 			this.tableHeadData.push(item)
					// 		} else {
					// 			this.tableData.push(item)
					// 		}

					// 	})

					// 	console.log(this.tableHeadData)

					// }

				})

			},
			async inputBlur(item, key) {
				console.log(item, key)
				if(item.status == '1') {
					console.log("已经提交的数据不可修改")
					this.$refs.uToast.show({
						type: 'warning',
						icon: false,
						title: '提示',
						message: "已经提交的数据不可修改",
					})
					return
				}
				const res = await meetingUnblendedCorrelation({...item, loading: false,})
				console.log("修改的结果为", res)
			},
			async change(e) {
				console.log(e)
				let _this = this
				const index = JSON.parse(e.target.dataset.index)

				const data = this.tableData[index].meetingUnblendedCorrelationRep
				if (data.status == '1') {
					uni.showToast({
						title: '已提交的数据不能修改',
						icon: 'none',
						mask: true
					})

					await this.getData()
					return false
				}

				meetingUnblendedCorrelation({
					loading: false,
					...data
				}).then(res => {
					if (res.code == 200) {
						// uni.showToast({title: '修改成功',	icon: 'none',mask: true})
						// _this.getData()
					}

				})

			},
			async submit() {
				if(this.already) return;
				// aromaFlavor    aromaQuality   aromaVolume  density  fineness   aftertaste impure  thrill  energy   combustibility soot characteristic purpose remarks			

				// 查询填写是否完整
				let isFull = true
				this.tableData.forEach(item => {
					const e = item.meetingUnblendedCorrelationRep
					if (!e.aromaFlavor || !e.aromaQuality || !e.aromaVolume || !e.density || !e
						.fineness || !e.aftertaste || !e.impure || !e.thrill || !e.energy || !e
						.combustibility || !e
						.soot || !e.characteristic || !e.purpose || !e.remarks) {
						isFull = false
						console.log(item);
					}
				})
				console.log(isFull);

				if (!isFull) {
					uni.showToast({
						title: '请检查您的输入是否完整',
						icon: 'none',
						mask: true
					})

					return false
				}

				this.$emit('c_submit', '单料评吸');
				// this.$emit('update:Index', 1);

				const res = await request.put('/ipad/meetingUnblendedCorrelation/submit/' + this.id, {
					allId: this.id
				})
				console.log(res);
				this.getData()

			},
		},
		mounted() {

			console.log(this.id)
			this.getData()

		}
	}
</script>

<style lang="scss" scoped>
	.cFont {

		color: #27B186;
		font-size: 11rpx;
	}

	.btns {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 86rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		.btn {
			width: 116rpx;
			height: 26rpx;
			border-radius: 3.84rpx;
			text-align: center;
			line-height: 26rpx;
			font-size: 11rpx;
			font-weight: bold;
			color: #FFFFFF;
			background-image: url(../../../static/Rectangle24.png);
			background-size: cover;
			cursor: pointer;

			&:hover {
				opacity: 0.5;
			}

			&:last-child {
				background-image: url(../../../static/Rectangle113.png);
				margin-left: 41rpx;
			}
		}
	}

	.tabHead {
		height: 80rpx;
		background: #F3FFF9;
		border-radius: 3rpx 3rpx 3rpx 3rpx;
		opacity: 1;
		padding: 7rpx 9rpx;
		display: flex;

		.tit {
			font-size: 11rpx;
			font-weight: bold;
			color: #6C9789;
		}

		.top {
			height: 17rpx;
			line-height: 17rpx;
		}

		.bot {
			display: flex;
			flex-wrap: wrap;
			// justify-content: space-between;
		}

		.p {
			font-size: 11rpx;
			color: #999999;
			line-height: 13rpx;
		}

		.left {
			width: 148rpx;

			.top {
				margin-bottom: 14rpx;
			}

			.bot {
				align-items: center;

				.p1 {
					width: 22rpx;
					margin-right: 27rpx;
				}
			}
		}

		.list {
			flex: 1;
			display: flex;
			flex-wrap: wrap;

			.top {
				margin-bottom: 8rpx;
				text-align: center;
			}

			.item {
				width: 16.6666%;

				.box {
					display: flex;
					flex-wrap: wrap;
					justify-content: center;

					.i {
						width: 18rpx;
						height: 18rpx;
						background: #FFFFFF;
						border-radius: 4rpx 4rpx 4rpx 4rpx;
						font-size: 11rpx;
						line-height: 18rpx;
						text-align: center;
						color: #999999;
						font-weight: 400;
						margin-right: 4rpx;
						margin-bottom: 2rpx;

						&:nth-child(3n) {
							margin-right: 0;
						}
					}
				}
			}
		}

		.right {
			width: 70rpx;
		}


	}


	.table-header {
		background-color: #f3fff9;

		.bh {
			width: 80rpx;
		}

		.nf {
			width: 100rpx;
		}

		.tc {
			width: 50rpx;
		}

	}


	.table {
		tr {

			th {
				padding: 6rpx 0;
				color: #6c9789;
				margin: 5rpx;
			}

			td {

				text-align: center;


			}

			.td {
				// width: 50rpx;

				background-color: #f8f8f8;
				padding: 6rpx 0;
				border-radius: 3rpx;
			}
		}
	}

	.submit-line {
		width: 100%;
		display: flex;
		justify-content: center;
		margin-top: 20px;
		.btn {
			width: 100px;
			background-color: #16b777;
		}
	}
</style>